<template>
	<el-row class="panel-group" :gutter="1">
		<el-col>
			<p style="float: left;font-size: 30px;font-weight: bold;color: #8c939d">{{$t('orderInfo.myOrder')}}</p>
		</el-col>

		<el-col v-show="loaded" v-if="!!orders" :xs="6" :sm="6" :lg="6" :offset="1" class="card-panel-col" v-for="obj in orders"
		 :key="obj.orderId">
			<div class='card-panel'>

				<!--临时屏蔽链接-->
				<!--<a @click="skip(obj.order.companyId, obj.orderDetail.productId)">-->
				<img :src="img[obj.order.imgUrl]" style="margin-left: auto;margin-right: auto;width: 300px">
				<!--</a>-->
				<el-col>
					<p style="font-size: 16px;font-weight: bold;float: left;padding-left: 20px;color: #b3b3b3">
						<!--临时屏蔽链接-->
						<!--<a @click="skip(obj.order.companyId, obj.orderDetail.productId)">-->
						{{obj.orderDetail.productName}}
						<!--</a>-->
					</p>
				</el-col>
				<div style="font-size: 14px;font-weight: bold;float: left;padding-left: 20px;color: #b3b3b3">
					<p>{{$t('orderInfo.orderNum')}}：{{obj.orderId}}</p>
					<p style="text-align: left;">{{obj.orderDetail.productService}}</p>
					<p style="text-align: left;">{{$t('orderInfo.dueTime')}}：{{obj.orderDetail.outDate | date('YYYY/MM/DD')}}</p>
				</div>
				<div class="card-panel-description">
					<el-button :style="[{'border': '2px solid #b3b3b3'}, {'font-size': '10px'}, {'margin-top': browser.indexOf('Firefox') > 0 ? '100px' : '0px'}]"
					 size="mini" round @click="personal(obj)">{{$t('standard.details')}}〉
					</el-button>
					<template slot-scope="scope">
						<img src="../../assets/info.png" @click="personal(obj)" />
					</template>
				</div>
			</div>
		</el-col>
		<el-col style="margin-left: -250px; margin-top: 80px" v-show="!!orders">
			<div style="font-size: 18px;cursor: pointer;font-weight: bold;text-align: right;margin-top: -88px;color: #b3b3b3"
			 @click="getOrders()" v-show="orders.length==3">
				{{$t('orderInfo.allOrder')}}
			</div>
			<div style="font-size: 18px;cursor: pointer;font-weight: bold;text-align: right;margin-top: -88px;color: #b3b3b3"
			 @click="getOrders(3)" v-show="orders.length>3">
				{{$t('orderInfo.someOrder')}}
			</div>
		</el-col>
		<el-col v-show="loaded" v-if="!orders" :xs="6" :sm="6" :lg="4" :offset="8" class="card-panel-col">
			<div class='card-panel' style="background-color: inherit;border-radius: 200px;">
				<img src="../../assets/no-order-icon.png" style="margin-left: auto;margin-right: auto;width: 300px">
			</div>
			<el-col>
				<p style="font-size: 16px;font-weight: bold;float: left;padding-left: 60px;color: #6F6F6F">
					{{$t('message.notOrder')}}
				</p>
			</el-col>
		</el-col>
		<el-col>
			<p style="float: left;font-size: 30px;font-weight: bold;color: #8c939d">{{$t('orderInfo.product')}}</p>
		</el-col>
		<el-col :offset="1">
			<div class="ih-item" v-for="obj in content" :key="obj.id">
				<a href="#">
					<div class="img">
						<img :src="productImg[obj.img]" alt="img">
					</div>
					<div class="info" style="line-height: 100px" @click=buyProduct(obj)>
						<h3>{{obj.productName}}</h3>
					</div>
				</a>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import order from './order'

	export default order;
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.panel-group {
		margin-top: 18px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 40px;

		.card-panel-col {
			margin-bottom: 32px;
		}

		.card-panel {
			width: 350px;
			cursor: pointer;
			font-size: 12px;
			position: relative;
			margin-left: auto;
			margin-right: auto;
			overflow: hidden;
			color: rgba(26, 26, 26, 0.8);
			background: #ffffff;
			box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
			border-color: rgba(0, 0, 0, .05);
			border-radius: 10px;

			&:hover {
				.card-panel-icon-wrapper {
					color: #fff;
				}

				.icon-people {
					/* background: #40c9c6;*/
				}

				.icon-message {
					background: #36a3f7;
				}

				.icon-money {
					background: #f4516c;
				}

				.icon-shoppingCard {
					background: #34bfa3
				}
			}

			.icon-people {
				color: #40c9c6;
			}

			.icon-message {
				color: #36a3f7;
			}

			.icon-money {
				color: #f4516c;
			}

			.icon-shoppingCard {
				color: #34bfa3
			}

			.card-panel-icon-wrapper {
				//float: ;
				margin: 14px 0 0 14px;
				padding: 16px;
				transition: all 0.38s ease-out;
				border-radius: 6px;
			}

			.card-panel-icon {
				float: left;
				font-size: 48px;
			}

			.card-panel-description {
				float: right;
				font-weight: bold;
				margin: 26px;
				margin-left: 0px;
				margin-top: -37px;

				.card-panel-text {
					line-height: 10px;
					color: rgba(0, 0, 0, 0.45);
					font-size: 10px;
					margin-bottom: 12px;
				}

				.card-panel-num {
					font-size: 20px;
				}
			}
		}
	}

	.opacity-black-position {
		width: 150px;
		height: 150px;
		position: relative;
	}

	.opacity-black-position i {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0);
		transition: background-color .5s;
		color: #b3b3b3;
	}

	.opacity-black-position a:hover i {
		background-color: rgba(0, 0, 0, .4);
		margin-left: auto;
		margin-right: auto;
		border-radius: 5px;
	}

	.opacity-black-position .info {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		-webkit-backface-visibility: hidden;
		/* 隐藏旋转元素的背面*/
		backface-visibility: hidden;
		background: rgba(0, 0, 0, 0.4);
		/*后面这个0.6是指的背景的透明度*/
		opacity: 0;
		-webkit-transition: all 0.35s ease-in-out;
		/*规定提示信息怎样出现ease-in-out以慢速度开始和结束*/
		-moz-transition: all 0.35s ease-in-out;
		transition: all 0.35s ease-in-out;
	}

	.ih-item {
		position: relative;
		width: 150px;
		height: 150px;
		float: left;
		margin-left: 40px;
	}

	.ih-item .img img {
		position: relative;
		width: 150px;
		height: 150px;
		max-width: 100%;
	}

	.ih-item .info {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		-webkit-backface-visibility: hidden;
		/* 隐藏旋转元素的背面*/
		backface-visibility: hidden;
		background: rgba(0, 0, 0, 0.6);
		/*后面这个0.6是指的背景的透明度*/
		opacity: 0;
		-webkit-transition: all 0.35s ease-in-out;
		/*规定提示信息怎样出现ease-in-out以慢速度开始和结束*/
		-moz-transition: all 0.35s ease-in-out;
		transition: all 0.35s ease-in-out;
		border-radius: 8px;
		color: #ffffff;
	}

	.ih-item a:hover .info {
		opacity: 1;
		/*有opacity有0变成1*/
	}
</style>
